<template>
  <div v-loading="loading" class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto">
            <el-form-item label="O2O采购决策">
              <el-select v-model="params.approvalFlagTwo" placeholder="选择搜索" clearable size="mini" style="width: 200px">
                <el-option :key="0" label="待决策" :value="0" />
                <el-option :key="1" label="需线上建品" :value="1" />
                <el-option :key="2" label="不线上建品" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="params.item1Desc" size="mini" placeholder="商品名称" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item label="UPC">
              <el-input v-model="params.upcNbrStr" size="mini" placeholder="多个以逗号分隔" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:5px">
      <el-button size="mini" type="danger" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="doUpdateApproval(2)">不线上建品</el-button>
      <el-button size="mini" type="success" style="float:right;margin-bottom:5px;margin-left:0px;back" round @click="doUpdateApproval(1)">需线上建品</el-button>
      <el-table ref="itemTab" :data="data" :row-key="getRowKeys" stripe size="small" border style="width: 100%;" @header-dragend="colChange" @sort-change="sortChange" @selection-change="handleSelectionChange">
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" :selectable="isDisabled" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="部门" prop="deptNbr" :width="colWidths.vendorPortalId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="细分类" prop="finelineNbr" :width="colWidths.vendorPortalId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="UPC" prop="upcNbr" :width="colWidths.vendorPortalId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="商品名称" prop="item1Desc" :width="colWidths.vendorPortalId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="供应商编号" prop="vendorNbr" :width="colWidths.vendorPortalId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="供应商名称" prop="vendorName" :width="colWidths.vendorPortalId" />
        <!--
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="供应商建议"                   :width="colWidths.vendorPortalId" />
        -->
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="采购建议" prop="approvalFlagOne" :width="colWidths.vendorPortalId" x>
          <template slot-scope="scope">
            <span>{{ parseApproval(scope.row.approvalFlagOne) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="品类运营决策" prop="approvalFlagTwo" :width="colWidths.vendorPortalId">
          <template slot-scope="scope">
            <span>{{ parseApproval(scope.row.approvalFlagTwo) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="维护人" prop="updatedBy" :width="colWidths.buyerId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="维护时间" prop="updatedTime" :width="colWidths.syncTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updatedTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10,50,100,500]"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <itemForm ref="itemForm" :parent="parent" />
    <fileForm ref="fileForm" :parent="parent" />
    <addInfo ref="addInfo" :parent="parent" />
  </div>
</template>

<script>
/* eslint-disable */
import itemForm from '@/views/new-item/info'
import initData from '@/utils/reason/initDataO2o'
import { parseTime } from '@/utils/index'
import { Message } from 'element-ui'
import { batchUpdateFilePath } from '@/api/new-item'
import { uploadFile } from '@/api/change-item'
import itemStatusForm from '@/views/part/itemStatus'
import { toItemInfo, doDeleteItem } from '@/utils/newItem'
import fileForm from '@/views/new-item/create/file'
import addInfo from '@/views/coi/reason/addInfo'
import { getBuyerIdList } from '@/api/api'
import { doDownload } from '@/api/download'
import { approvalAdd, approvalUpdate } from '@/api/reason/dataO2o'

export default {
  components: { itemForm, itemStatusForm, fileForm, addInfo },
  mixins: [initData],
  data() {
    return {
      syncTime: [],
      parent: this,
      ids: [],
      loading: false,
      activeName: '1'
    }
  },
  created() {
    // this.params = {}
    // this.params.approvalFlagTwo = 0
    this.init()
  },
  methods: {
    parseTime,
    toItemInfo,
    doDeleteItem,
    beforeInit() {
      this.url = '/approvalO2oController/selectPage'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 上传时间日期组件触发
    syncTimeChange(val) {
      this.params.findSyncTimeStartDate = val[0]
      this.params.findSyncTimeEndDate = val[1]
    },
    // 列表排序触发
    sortChange(val) {
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.params.sort = val.prop + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      if (this.params.upcNbrs) {
        this.params.upcNbrs = this.params.upcNbrs.trim().replaceAll('，', ',')
      }
      this.init()
      this.doClearSelection()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = {}
      this.syncTime = []
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 批量导出
    doExportExcel() {
      if (this.ids.length < 1) {
        Message({
          message: '请选择需要导出的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        this.$confirm('确认导出选择的 ' + this.ids.length + ' 条item信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          doDownload('/new-item/exportExcel', { ids: this.ids }, 'new-item.xlsx').then(() => {
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        })
      }
    },
    // 清空选择项
    doClearSelection() {
      this.$refs.itemTab.clearSelection()
    },
    // 新增触发
    doAdd() {
      this.loading = true
      getBuyerIdList().then(val => {
        const _this = this.$refs.fileForm
        _this.buyerList = val
        _this.buyerId = val[0]
        _this.dialog = true
        this.loading = false
      }, error => {
        console.log(error)
        this.loading = false
      })
    },
    addInfo() {
      const _this = this.$refs.addInfo
      _this.dataInfo.id = ''
      _this.dataInfo.reason = ''
      // _this.flinfo.scheduleName = ''
      // _this.flinfo.effectiveDate = ''
      // _this.flinfo.cutOffDay = ''
      // _this.flinfo.remark = ''
      // _this.flinfo.citys = ''
      // _this.flinfo.mergeSchedule = true
      // _this.flinfo.expiryDate = ''
      _this.dialog = true
      _this.dialogStatus = 'addMap'
      // _this.citysMap = this.columnsMap
      // _this.checkedCitys = []
      // _this.diasabledInput = false
    },
    updateInfo(dataInfo) {
      const _this = this.$refs.addInfo
      _this.dataInfo = dataInfo
      // _this.flinfo.scheduleName = ''
      // _this.flinfo.effectiveDate = ''
      // _this.flinfo.cutOffDay = ''
      // _this.flinfo.remark = ''
      // _this.flinfo.citys = ''
      // _this.flinfo.mergeSchedule = true
      // _this.flinfo.expiryDate = ''
      _this.dialog = true
      _this.dialogStatus = 'editMap'
      // _this.citysMap = this.columnsMap
      // _this.checkedCitys = []
      // _this.diasabledInput = false
    },
    deleteInfo(dataInfo) {
      this.$confirm('确认删除驳回原因?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.url = '/approvalO2oController/delete/' + dataInfo.id
        deleteInfo(this.url).then(() => {
          this.toQuery()
          Message({
            message: '操作成功。',
            type: 'success',
            duration: 3 * 1000
          })
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
    },
    parseApproval(str) {
      let value
      if (str == 0) {
        value = '待决策'
      } else if (str == 1) {
        value = '需线上建品'
      } else if (str == 2) {
        value = '不线上建品'
      }
      return value
    },
    doApproval(flag) {
      if (this.ids.length < 1) {
        Message({
          message: '请选择' + (flag == 1 ? '需要' : '不需要') + '线上建品的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        // this.$confirm('确认' + (flag == 1 ? '需要' : '不需要') + '线上建品选择的 ' + this.ids.length + ' 条item信息?', '提示', {
        this.$confirm('共选中' + this.ids.length + '个商品，确定' + (flag == 1 ? '需要' : '不需要') + '线上建品吗？ ', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.url = '/approvalO2oController/add'
          approvalAdd(this.url, this.ids, flag).then(() => {
            this.toQuery()
            Message({
              message: '操作成功。',
              type: 'success',
              duration: 3 * 1000
            })
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        })
      }
    }, 
    doUpdateApproval(flag) {
      if (this.ids.length < 1) {
        Message({
          message: '请选择' + (flag == 1 ? '需要' : '不需要') + '线上建品的item。',
          type: 'error',
          duration: 3 * 1000
        })
      } else {
        //this.$confirm('确认' + (flag == 1 ? '需要' : '不需要') + '线上建品选择的 ' + this.ids.length + ' 条item信息?', '提示', {
        this.$confirm('共选中' + this.ids.length + '个商品，确定' + (flag == 1 ? '需要' : '不需要') + '线上建品吗？ ', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.url = '/approvalO2oController/update'
          approvalUpdate(this.url, this.ids, flag).then(() => {
            this.toQuery()
            Message({
              message: '操作成功。',
              type: 'success',
              duration: 3 * 1000
            })
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        })
      }
    }, 
    // 方法返回一个布尔值
    isDisabled(row, index) {
      if (row.approvalFlagTwo != 0) {
        return false
      }
      return true
    }
  }
}
</script>
